<template>
  <m-page>
    <!-- 本期应还 -->
    <m-header title="本期应还"></m-header>
    <div class="repayment_page">
      <!-- 无应还数据时 显示暂无数据 -->
      <div class="g-view0" v-if="repayData.length === 0">
        <p>本期应还</p>
        <div class="g-top">
          <div class="g-list1">
            <p>本期剩余应还(元)</p>
            <ynet-button>本期已还清</ynet-button>
          </div>
          <div class="g-list2">
            <p>
              <ynet-amount :value="0" :precision="2" />
            </p>
          </div>
          <div class="g-list3">
            <p>
              本期账单:
              <span class="u-txt1">
                <ynet-amount :value="billmoney" :precision="2" />
              </span>元
            </p>
            <p>截至还款日02-26</p>
          </div>
        </div>
        <p>提前还款</p>
        <div class="g-null">暂无可提前还款数据</div>
      </div>
      <!-- 有应还数据时 显示相应的应还账单 -->
      <div class="g-view1" v-if="repayData.length > 0">
        <p>本期应还</p>
        <div class="g-top1">
          <div class="g-left">
            <ynet-check name="A" size="lg" v-model="checked1"></ynet-check>
          </div>
          <div class="g-right">
            <div class="g-list1">
              <p>本期剩余应还(元)</p>
              <ynet-button type="warning plain">已逾期四天</ynet-button>
            </div>
            <div class="g-list2">
              <p>
                <ynet-amount :value="repaymoney" :precision="2" has-separator />
              </p>
            </div>
            <div class="g-list3">
              <p>
                本期账单:
                <span class="u-txt1">
                  <ynet-amount :value="billmoney" :precision="2" has-separator />
                </span>元
              </p>
              <p>截至还款日02-26</p>
            </div>
          </div>
        </div>
        <p>提前还款</p>
        <!-- 应还账单 -->
        <div class="g-bottom" v-for="item in repayData" :key="item.id">
          <div class="g-item">
            <div class="g-left">
              <ynet-check :name="item.id" size="lg" v-model="checked2"></ynet-check>
            </div>
            <div class="g-right">
              <p class="u-txt1">
                申请用款
                <span>{{item.applyMoney}}</span>
              </p>
              <p class="u-txt2">
                剩余应还
                <ynet-amount :value="item.remainingRepay" :precision="2" />元，含本期手续费
                <ynet-amount :value="item.fee" :precision="2" />元。
              </p>
              <p>到期日{{item.date}}</p>
            </div>
          </div>
        </div>
        <!-- 温馨提示 -->
        <div class="u-txt">
          <p>温馨提示：归还本金时应先归还"本期应还"。</p>
        </div>
        <div class="u-btn">
          <ynet-button type="warning" @click="returnMoney">立即还款</ynet-button>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import ynetIcon from "@components/icon/index";
import ynetCellItem from "@components/cell-item/index";
import ynetButton from "@components/button/index";
import { Amount, Check } from "ynet-mobile";
export default {
  components: {
    ynetIcon,
    ynetCellItem,
    ynetButton,
    [Amount.name]: Amount,
    [Check.name]: Check
  },
  data() {
    return {
      repaymoney: 23000, //本期剩余应还金额
      billmoney: 39000, //账单金额
      repayData: [
        {
          id: 1,
          applyMoney: "5万元", //申请用款金额
          remainingRepay: 5500, //剩余应还
          fee: 50, //手续费
          date: "10月21日" //到期日
        },
        {
          id: 2,
          applyMoney: "6万元",
          remainingRepay: 4500,
          fee: 50,
          date: "09月21日"
        },
        {
          id: 3,
          applyMoney: "7万元",
          remainingRepay: 6500,
          fee: 50,
          date: "12月21日"
        }
      ],
      checked1: "A", // 本期应还 check 组件选中的name值
      checked2: "" // 提前还款 check 组件选中的name值
    };
  },
  methods: {
    goto(item, data) {
      let url = `http://172.16.1.197:8080/smallbusinessloan/xin_yi_tong_card/${item}`;
      window.location.href = url;
      // let url = `smallbusinessloan/rong_yi_tong_card/${item}`;
      // app.api.pushWindow(url, params);
    },
    // 立即还款按钮
    // 点击进入还款信息页
    returnMoney() {
      console.log(this.checked1);
      console.log(this.checked2);
      this.goto("repayment_information.html");
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

